<template>
	<view class="safe-area-layout">
		<view class="bgview" v-for="(item,index) in  dataList" :key="item.id">
			<view class="left" @click="toSetSafeArea(item)">
				<view class="footimg">
					<image src="../../static/function/tarck-foot.png" mode=""></image>
				</view>
				<view class="content">
					<view class="title">
						{{item.name}}
					</view>
					<view class="address">
						{{item.addrName}}
					</view>
				</view>

			</view>
			<view class="right">
				<switch @change="swichChange(item,$event)" :checked="item.state" color="#53786C"
					style="transform:scale(0.7)" />
				<view class="clear_fence" @click="deleteFence(index)">
					<uni-icons class="delete" type="clear" color="#53786C" size="26"></uni-icons>
				</view>
			</view>

		</view>

	</view>
</template>

<script setup>
	import {
		apiGetDeviceFenceList,
		apiDeleteDeviceFence,
		apiSetDeviceFenceState
	} from '../../api/device_api';
	import { ref, computed, watch } from 'vue';
	import {
		onLoad,
		onShow,
		onNavigationBarButtonTap,
		onHide
	} from "@dcloudio/uni-app";
	import {i18nTool} from '../../utils/i18en';
	import { getImei } from '../../utils/user_tools';
	import store from '../../store';

	const imei = getImei();
	const param = {};
	const dataList = ref([]);
	const paramter = {};
	var fenceResult = ref(null);
	var timeOut = null;
	const toSetSafeArea = (item) => {
		uni.navigateTo({
			url: "/pages/function/set-safe-area-map?item=" + JSON.stringify(item)
		})
	}
	
	fenceResult.value = computed(() => store.getters.fenceId)
	
	watch(fenceResult.value,(newVal, oldVal) => {
		uni.hideLoading();
		if(timeOut){
			clearTimeout(timeOut);
		}
		uni.showToast({
			title:i18nTool('safeAreaList.sendSuc'),
			icon:'none'
		})
	},{deep: true})
	
	
	onLoad(() => {
		uni.setNavigationBarTitle({
			title:i18nTool("safeAreaList.navTitle")
		})
	})
	onShow(() => {
		getDeviceFenceList();
	})
	onHide(()=>{
		if(timeOut){
			clearTimeout(timeOut);
		}
	})
	

	onNavigationBarButtonTap((e) => {
		uni.navigateTo({
			url: "/pages/function/set-safe-area-map"
		})
	})
	async function swichChange(item, event) {
		paramter.state = event.detail.value ? 1 : 0;
		paramter.imei = imei;
		paramter.id = item.id;
		let res = await apiSetDeviceFenceState(paramter);
		uni.showLoading({
			title:"Loading...",
			mask:true,
		})
		timeOut = setTimeout(()=>{
			uni.hideLoading();
			uni.showToast({
				title:i18nTool('safeAreaList.sendFail'),
				icon:'none',
			})
			clearTimeout(timeOut);
			item.state = !event.detail.value;
			getDeviceFenceList();
		},10000)
	}
	
	async function getDeviceFenceList() {
		param.imei = imei;
		let res = await apiGetDeviceFenceList(param);
		dataList.value = res.content;

	}

	async function deleteFence(index) {
		let data = dataList.value[index]
		const param = {
			imei: imei,
			id: data.id
		}
		let res = await apiDeleteDeviceFence(param);
		dataList.value.splice(index, 1)
		getDeviceFenceList();
	}
</script>

<style lang="scss" scoped>
	.safe-area-layout {
		background-color: #f9f9f9;
		height: 100vh;
		width: 100vw;
		padding-top: 10rpx;

		.bgview {
			display: flex;
			margin: 20rpx 20rpx;

			height: 160rpx;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			border-radius: 20rpx;

			.left {
				display: flex;
				align-items: center;
				justify-content: start;

				.footimg {
					width: 80rpx;
					height: 80rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.content {
					display: flex;
					flex-direction: column;
					justify-content: start;

					.title {
						font-size: 28rpx;
						color: #333;
					}

					.address {
						font-size: 26rpx;
						color: #666;
					}
				}

			}

			.right {
				display: flex;
				justify-content: space-between;
				align-items: center;

			}
		}

	}
</style>